<!-- 柱状图 - 开启2d解决图表层级过高问题 -->
<template>
    <view class="charts-box" :style="{width, height}">
        <qiun-data-charts type="column" :opts="opts" :chartData="chartData" :tooltipShow="false" :ontouch="true" :canvas2d="true" :canvasId="canvasId" />
    </view>
</template>
  
<script>
import qiunDataCharts from './uCharts/qiun-data-charts/qiun-data-charts'
export default {
    props: {
        width: {
            type: String,
            default: '100%'
        },
        height: {
            type: String,
            default: '300rpx'
        },
        rawData: { // 接口返回的对象
            type: Object,
            default: () => {}
        },
        itemCount: { // 单屏幕数据点数量
            type: Number,
            default: 5
        }
    },
    data() {
        return {
            chartData: {}, // 图表数据
            opts: { // 配置参数
                color: ["#3A93FF"],
                padding: [15,0,0,0],
                enableScroll: true,
                legend: {
                    show: false
                },
                xAxis: {
                    disableGrid: true,
                    itemCount: this.itemCount,
                    scrollAlign: 'right' // 滚动条初始位置
                },
                yAxis: {
                    data: [
                        {
                            min: 0
                        }
                    ]
                },
                extra: {
                    column: {
                        type: "group",
                        width: 10,
                        activeBgColor: "#000000",
                        activeBgOpacity: 0.08
                    }
                }
            },
            letters: ["A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z",
                        "a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z"],
            canvasId: ''
        }
    },
    components: {
        qiunDataCharts
    },
    onReady() {
        this.canvasId = this.randomStr()
    },
    watch: {
        rawData: {
            handler(newVal){
                if(!newVal) return
                let res = {
                    categories: newVal.thisHName,
                    series: [ newVal.series ]
                }
                this.chartData = JSON.parse(JSON.stringify(res))
            },
            immediate: true
        }
    },
    methods: {
        getServerData() {
            //模拟从服务器获取数据时的延时
            setTimeout(() => {
            //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
                let res = {
                    categories: ["2018","2019","2020","2021","2022","2023"],
                    series: [
                        {
                            name: "目标值",
                            data: [35,36,31,33,13,34]
                        }
                    ]
                }
                this.chartData = JSON.parse(JSON.stringify(res))
            }, 500)
        },
        randomStr(){ // 随机生成32位字符串
            let str = ''
            for(let i = 0; i < 32; i++){
                let i = Math.floor(Math.random() * this.letters.length) // 随机下标
                str += this.letters[i] // 拼接随机字母
                this.letters.splice(i, 1) // 不重复
            }
            return str
        }
    }
}
</script>
  
<style lang="scss" scoped>

</style>